<template>
	<transition name="fade">
		<div :class="{[prefixCls+'-alert']:true,[prefixCls+'-alert-'+type]:true,[prefixCls+'-alert-showicon']:true,[prefixCls+'-alert-with-desc']:title}" ref="alert" v-if="show">
			<span :class="[prefixCls+'-alert-icon']" v-if="showIcon||this.$slots.icon">
				<Icon :type="type+'-filling'" v-if="!this.$slots.icon" />
				<slot name="icon" v-else></slot>
			</span>
			<div :class="[prefixCls+'-alert-content']">
				<div :class="[prefixCls+'-alert-title']" v-if="title">{{title}}</div>
				<div :class="[prefixCls+'-alert-desc']"><slot></slot></div>
			</div>
			<a :class="[prefixCls+'-alert-close']" @click="onClose" v-if="closable">
				<template v-if="closeText">
					{{closeText}}
				</template>
				<Icon type="close" v-else />
			</a>
		</div>
	</transition>
</template>

<script>
import { prefixCls } from '../prefix'
import './alert.css'

export default {
	name: `${prefixCls}Alert`,
	data() {
		return {
			prefixCls: prefixCls,
			show:true,
		}
	},
	props: {
		type: {
			type: String,
			default: 'info'
		},
		title: {
			type: String,
		},
		showIcon: {
			type: Boolean,
			default: false
		},
		closable: {
			type: Boolean,
			default: false
		},
		closeText: {
			type: String,
		}
	},
	methods: {
		onClose() {
			this.show = false
			this.$emit('close')
		}
	},
}
</script>